React useEvent: Stabilisera Eventhanterare för Robusta Applikationer

Använda `useEvent` i praktiken

Låt oss återbesöka de tidigare exemplen och tillämpa `useEvent` för att lösa problemen.

Åtgärda inaktuella Closures

            
import React, { useState, useEffect, useCallback } from 'react';

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Antal är: ${count}`);
  });

  return (
    <div>
      <p>Antal: {count}</p>
      <button onClick={handleClick}>Visa antal</button>
      <p>Varning Antal: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Nu är `handleClick` en stabil funktion, men när den anropas kommer den åt det senaste värdet av `count` genom referensen. Detta förhindrar problemet med inaktuella closures.

Förhindra onödiga omrenderningar

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent omrenderad');
  return <button onClick={onClick}>Klicka här</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Antal: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Eftersom `handleClick` nu är en stabil funktionsreferens kommer `ChildComponent` endast att omrenderas när dess props *faktiskt* ändras, vilket förbättrar prestandan.

Alternativa implementeringar och överväganden

`useEvent` med `useLayoutEffect`

I vissa fall kan du behöva använda `useLayoutEffect` istället för `useEffect` i `useEvent`-implementeringen. `useLayoutEffect` utlöses synkront efter alla DOM-mutationer, men innan webbläsaren har en chans att måla. Detta kan vara viktigt om eventhanteraren behöver läsa eller ändra DOM omedelbart efter att eventet utlöses. Denna justering säkerställer att du fångar det mest uppdaterade DOM-tillståndet i din eventhanterare, vilket förhindrar potentiella inkonsekvenser mellan vad din komponent visar och de data den använder. Att välja mellan `useEffect` och `useLayoutEffect` beror på de specifika kraven för din eventhanterare och tidpunkten för DOM-uppdateringar.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

Varningar och potentiella problem

• Komplexitet: Även om `useEvent` löser specifika problem, lägger det till ett lager av komplexitet i din kod. Det är viktigt att förstå de underliggande koncepten för att använda det effektivt.
• Överanvändning: Använd inte `useEvent` urskillningslöst. Använd det bara när du stöter på inaktuella closures eller onödiga omrenderningar relaterade till eventhanterare.
• Testning: Testning av komponenter som använder `useEvent` kräver noggrann uppmärksamhet för att säkerställa att rätt hanterarlogik körs. Du kan behöva mocka `useEvent`-hooken eller komma åt `handlerRef` direkt i dina tester.

Globala perspektiv på eventhantering

När du bygger applikationer för en global publik är det avgörande att ta hänsyn till kulturella skillnader och tillgänglighetskrav i eventhanteringen:

• Tangentbordsnavigering: Se till att alla interaktiva element är tillgängliga via tangentbordsnavigering. Användare i olika regioner kan förlita sig på tangentbordsnavigering på grund av funktionshinder eller personliga preferenser.
• Pekevenemang: Stöd pekevenemang för användare på mobila enheter. Tänk på regioner där mobil internetåtkomst är mer utbredd än stationär åtkomst.
• Inmatningsmetoder: Var uppmärksam på olika inmatningsmetoder som används runt om i världen, till exempel kinesiska, japanska och koreanska inmatningsmetoder. Testa din applikation med dessa inmatningsmetoder för att säkerställa att händelser hanteras korrekt.
• Tillgänglighet: Följ alltid bästa praxis för tillgänglighet och se till att dina eventhanterare är kompatibla med skärmläsare och annan hjälpteknik. Detta är särskilt avgörande för inkluderande användarupplevelser över olika kulturella bakgrunder.
• Tidszoner och datum/tidsformat: När du arbetar med händelser som involverar datum och tider (t.ex. schemaläggningsverktyg, möteskalendrar) ska du vara uppmärksam på tidszoner och datum-/tidsformat som används i olika regioner. Ge användarna möjlighet att anpassa dessa inställningar baserat på deras plats.

Alternativ till `useEvent`

Även om `useEvent` är en kraftfull teknik finns det alternativa sätt att hantera eventhanterare i React:

• Att lyfta tillstånd: Ibland är den bästa lösningen att lyfta det tillstånd som eventhanteraren är beroende av till en komponent på högre nivå. Detta kan förenkla eventhanteraren och eliminera behovet av `useEvent`.
• `useReducer`: Om din komponents tillståndslogik är komplex kan `useReducer` hjälpa till att hantera tillståndsuppdateringar mer förutsägbart och minska risken för inaktuella closures.
• Klasskomponenter: Även om de är mindre vanliga i modern React ger klasskomponenter ett naturligt sätt att binda eventhanterare till komponentinstansen, vilket undviker closure-problemet.
• Inline-funktioner med beroenden: Använd inline-funktionsanrop med beroenden för att säkerställa att färska värden skickas till eventhanterare. `onClick={() => handleClick(arg1, arg2)}` med `arg1` och `arg2` uppdaterade via tillstånd kommer att skapa en ny anonym funktion vid varje render, vilket säkerställer uppdaterade closure-värden, men kommer att orsaka onödiga omrenderningar, själva grejen som `useEvent` löser.

Slutsats

`useEvent`-Hook (stabiliseringsalgoritm) är ett värdefullt verktyg för att hantera eventhanterare i React, förhindra inaktuella closures och optimera prestandan. Genom att förstå de underliggande principerna och överväga varningarna kan du använda `useEvent` effektivt för att bygga mer robusta och underhållbara React-applikationer för en global publik. Kom ihåg att utvärdera ditt specifika användningsfall och överväga alternativa metoder innan du tillämpar `useEvent`. Prioritera alltid tydlig och koncis kod som är lätt att förstå och testa. Fokusera på att skapa tillgängliga och inkluderande användarupplevelser för användare runt om i världen.

I takt med att React-ekosystemet utvecklas kommer nya mönster och bästa praxis att dyka upp. Att hålla sig informerad och experimentera med olika tekniker är avgörande för att bli en kunnig React-utvecklare. Omfamna utmaningarna och möjligheterna med att bygga applikationer för en global publik och sträva efter att skapa användarupplevelser som är både funktionella och kulturellt känsliga.